<template>
  <div>
    <div class="top-bar">
      <mu-appbar title="注册">
      <mu-icon-button icon="arrow_back" slot="left" @click="goBack" />
    </mu-appbar>
    </div>  
    <div class="regis-form">
      <mu-text-field hintText="请输入您的手机号码" ref="phoneInput" type="number" icon="phone" @change="handlePhoneChange" fullWidth /><br/>
      <mu-text-field hintText="请输入您的昵称" type="text" icon="phone" @change="handleNameChange" fullWidth /><br/>
      <mu-text-field hintText="设置登录密码，不少于6位" type="password" icon="label" @change="handlePassChange" fullWidth /><br/>
      <br>
      <br>
      <mu-raised-button label="立即注册" class="register-btn"  @click="handleRegister" secondary fullWidth/>
    </div>
    <mu-popup position="top" :overlay="false" popupClass="popup-top" :open="topPopup">
      注册成功！
    </mu-popup>
  </div>
</template>

<style>
  .popup-top {
    width: 100%;
    opacity: .8;
    height: 48px;
    line-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 375px;
  }

  .top-bar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    text-align: left;
  }

  .regis-form {
    margin-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
  }

  .register-btn {
    text-align: center;
    height: 43px;
    border-radius: 20px;
  }
</style>

<script>
  import Axios from 'axios'
  export default {
    data () {
      return {
        phone: '',
        passwd: '',
        name: '',
        topPopup: false
      }
    },
    watch: {
      topPopup (val) {
        if (val) {
          setTimeout(() => {
            this.topPopup = false
          }, 1500)
        }
      }
    },
    methods: {
      // mounted () {
      //   if (this.phone === '') {
      //     this.$router.push({path: '/index/song-list'})
      //   }
      // },
      open () {
        this.topPopup = true
      },
      goBack () {
        history.go(-1)
      },
      handlePhoneChange (e) {
        this.phone = e.target.value
      },
      handlePassChange (e) {
        this.passwd = e.target.value
      },
      handleNameChange (e) {
        this.name = e.target.value
      },
      handleRegister () {
        if (this.phone === '' || this.passwd === '' || this.name === '') {
          console.log('信息不全')
          return
        }
        var data = new FormData()
        data.append('phone', this.phone)
        data.append('password', this.passwd)
        data.append('uName', this.name)
        var instance = Axios.create({
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Accept': 'text/html, application/json'
          }
        })
        instance.post('http://hongtaofans.cn/music/user/register', data)
        .then((res) => {
          if (res.data.status === 1) {
            this.topPopup = true
            setTimeout(() => {
              this.$router.push({path: '/user/login'})
            }, 1500)
          } else {
            console.log(res.data)
          }
        })
        .catch((error) => {
          console.log(error)
        })
      }
    }
  }
</script>
